<template>
  <div class="home main-box">
    <!-- <h2>主页</h2> -->
    <!-- 上半部分 -->
    <div class="main-t">
      <van-nav-bar title="小记账" />
      <div class="panel">
        <div class="panel-tag">本月支出(元)</div>
        <div class="outer">
          <div class="outer-item">￥28.00</div>
        </div>
        <div class="inter">
          <div class="inter-left">
            <div class="text">本月收入</div>
            <div class="money">0.00</div>
          </div>
          <div class="inter-right">
            <div class="text">月结余</div>
            <div class="money">-28.00</div>
          </div>
        </div>
        <!-- 记一笔 -->
        <div class="recordAccount" @click="toOneStroke">
          记一笔
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="main-b">
      <div class="bill-main">
        <div class="bill-t">
          近3日账单
        </div>
        <div class="bill-b">
          <MinBill />
        </div>
      </div>
      <van-button type="primary" @click="test">测试接口</van-button>
      <van-button type="primary" @click="login">前往登录</van-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="Home">
// 首页
import MinBill from '@/components/MinBill.vue'
import request from '../utils/request';
import { showSuccessToast } from 'vant'

import { onUnmounted } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转到记一笔
function toOneStroke() {
  router.push("/oneStroke")
}


async function test() {
  console.log('测试')
  try {
    const response = await request.test().then(
      res => {
        console.log(res)
      }
    )
    console.log(response)
  } catch (error) {
    showSuccessToast('登录身份失效')
    // console.error('请求出错:', error);
  }
}

function login() {
  router.push('/login')
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.main-t {
  background-image: url('../image//titleBg.png');
  background-size: contain;
  background-position: 0% 25%;
  background-color: @gabelBgColor;
  background-repeat: no-repeat;

  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  .panel {
    background-color: #fff;
    border-radius: 50px;
    padding: 30px;
    margin: @gabelMargin;
    margin-top: 50px;
    margin-bottom: 130px;
    font-size: 48px;
    position: relative;
    bottom: -100px;


    .panel-tag {
      font-size: 32px;
      color: @garyFontColor;
    }

    .outer {
      margin: 20px 0;

      .outer-item {
        font-size: 58px;
        font-weight: 700;
      }
    }

    .inter {
      display: flex;
      justify-content: space-between;
      font-size: 30px;

      .inter-left,
      .inter-right {
        width: 50%;
        display: flex;
        align-items: center;

        .text {
          color: @garyFontColor;
        }

        .money {
          margin-left: 10px;
          margin-top: 5px;
        }
      }
    }

    .recordAccount {
      background-color: @gabelBgColor;
      padding: 10px 0;
      margin-top: 30px;
      display: flex;
      justify-content: center;
      border-radius: 50px;
      font-size: 40px;
    }
  }
}

.main-b {
  height: 50%;
  font-size: 35px;
  margin: @gabelMargin;

  .bill-main {
    .bill-t {
      margin-bottom: 30px;
    }
  }
}
</style>